<template>
  <div class="content">
    <!-- <div class="title">报名页</div> -->
    <img class="img" src="../assets/form-bg.png" />
    <van-form @submit="onSubmit" class="form">
      <van-field
        name="companyHy"
        label="所属行业"
        required
        label-width="100%"
        :rules="[{ required: true, message: '请选择所属行业' }]"
      >
        <template #input>
          <van-radio-group v-model="formData.companyHy" icon-size="16px">
            <van-radio name="管理咨询">管理咨询</van-radio>
            <van-radio name="商学培训">商学培训</van-radio>
            <van-radio name="财税服务">财税服务</van-radio>
            <van-radio name="法律服务">法律服务</van-radio>
            <van-radio name="保险服务">保险服务</van-radio>
            <van-radio name="高等院校">高等院校</van-radio>
          </van-radio-group>
        </template>
      </van-field>
     
      <van-field
        v-model="formData.realName"
        name="realName"
        label="姓名"
        placeholder="姓名"
        label-width="100%"
        required
        class="input-field"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="formData.companyName"
        name="companyName"
        label="公司名称"
        placeholder="公司名称"
        :rules="[{ required: true, message: '请填写公司名称' }]"
        required
        class="input-field"
        label-width="100%"
      />

      <van-field
        name="gender"
        label="性别"
        required
        label-width="100%"
        :rules="[{ required: true, message: '请选择性别' }]"
      >
        <template #input>
          <van-radio-group v-model="formData.gender" icon-size="16px">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="formData.mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        label-width="100%"
        required
        class="input-field"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />

      <van-field
        name="workExperience"
        label="从业年限"
        label-width="100%"
        required
        :rules="[{ required: true, message: '请选择从业年限' }]"
      >
        <template #input>
          <van-radio-group
            icon-size="16px"
            v-model="formData.businworkExperienceess"
          >
            <van-radio :name="1">3-5年</van-radio>
            <van-radio :name="2">6-10年</van-radio>
            <van-radio :name="3">10年以上</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        name="workPosition"
        label="从业身份"
        label-width="100%"
        icon-size="16px"
        required
        :rules="[{ required: true, message: '请选择从业年限' }]"
      >
        <template #input>
          <van-radio-group v-model="formData.workPosition" icon-size="16px">
            <van-radio name="股东">股东</van-radio>
            <van-radio name="高管">高管</van-radio>
            <van-radio name="专业人员">专业人员</van-radio>
            <van-radio name="其他">其他</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        name="participationDate"
        label="参会日期"
        required
        label-width="100%"
        :rules="[{ required: true, message: '请选择参会日期' }]"
      >
        <template #input>
          <van-radio-group
            v-model="formData.participationDate"
            icon-size="16px"
          >
            <van-radio name="2025-11-16 08:00:00" :disabled="people[0] == 30"
              >2025年11月16日 上午场({{ people[0] || 0 }}/30人)</van-radio
            >
            <van-radio name="2025-11-16 13:00:00" :disabled="people[1] == 30"
              >2025年11月16日 下午场({{ people[1] || 0 }}/30人)</van-radio
            >
          </van-radio-group>
        </template>
      </van-field>
      <div class="action-box">
        <van-button
          round
          native-type="submit"
          :disabled="true"
          color="#183088"
          v-if="isFull"
        >
          名额已满
        </van-button>
        <van-button
          v-else
          round
          native-type="submit"
          :disabled="isSubmit"
          color="#183088"
        >
          {{ isSubmit ? "已报名" : "提交" }}
        </van-button>
      </div>
      <div class="tip">
        信息安全承诺：<br />本公司高度重视客户隐私，您所提交的电话及其他个人信息，仅用于为您提供相关服务及后续沟通，我们将采取严格的保密措施，绝不会泄露、出售或提供给任何无关第三方。特此承诺！
      </div>
      <div class="tip">
        隐私声明：<br />根据国家相关法律法规及本公司《隐私政策》，我们对您提供的信息严格保密，仅用于业务办理之必要目的。未经您本人授权，我们不会将信息用于其他用途或共享给第三方。
      </div>
    </van-form>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import service from "@/utils/request.js";
import checkMobile from "@/utils/checkMobile.js";
import { showToast } from "vant";

document.title = '使命顾问参会报名'
const isSubmit = ref(false);
const isFull = ref(false);

const people = ref([0, 0]);
const formData = ref({
  mobile: "",
  realName: "",
  gender: "",
  companyHy: "",
  workExperience: "",
  workPosition: "",
  companyName: "",
  participationDate: "",
});

const getNum = () => {
  service
    .post("/api/invite/letter/query/count", [
      "2025-11-16 08:00:00",
      "2025-11-16 13:00:00",
    ])
    .then((res) => {
      if (res && res.data.length) {
        res.data?.map((it) => {
          if (it.participationDate == "2025-11-16 08:00:00") {
            people.value[0] = it.joinCount;
          }
          if (it.participationDate == "2025-11-16 13:00:00") {
            people.value[1] = it.joinCount;
          }
        });
        
        if (people.value[0] == 30 && people.value[1] == 30) {
          showToast("名额已满");
          isFull.value = true
        }
      }
    });
};

const onSubmit = async (values) => {
  const _right = checkMobile(values.mobile);
  if (!_right) return;

  service.post("/api/invite/letter/save", values).then(() => {
    showToast("报名成功");
    isSubmit.value = true;
  });
};

onMounted(() => {
  getNum();
});
</script>
<style scoped lang="scss">
.content {
  min-height: 100vh;
  background: linear-gradient(
      180deg,
      #0050ff 0%,
      #c5d5f4 34%,
      #f4f7fa 51%,
      #f5faff 100%
    ),
    #f4f7fa;
  padding-top: 40px;
  padding-bottom: 100px;
}
.title {
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  font-weight: 400;
  margin-bottom: 10px;
}
.img {
  width: 80%;
  margin: 0 auto;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.form {
  margin: 166px 24px auto 24px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
  padding-bottom: 16px;
  .tip {
    padding: 16px 16px 0 16px;
    font-size: 12px;
    color: #333
  }
  .van-cell:after {
    display: none;
  }
  :deep(.van-cell__value) {
    // font-size: 16px;
  }
  .van-field {
    padding-top: 0;
    padding-bottom: 0;
  }
  :deep(.van-cell__title) {
    height: 48px;
    line-height: 48px;
    // font-size: 16px;
  }
  .van-radio__label {
    // font-size: 16px;
  }
  .van-radio-group {
    flex: 1;
  }
  .van-radio {
    background: #f6f8fe;
    height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    // font-size: 16px;
    margin-bottom: 12px;
  }
  .input-field :deep(.van-field__control) {
    background: #f6f8fe;
    height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    // font-size: 16px;
  }
}
.action-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: #fff;
  padding: 16px 0;
  display: flex;
  justify-content: center;

  .van-button {
    width: calc(100% - 48px);
  }
}
</style>
